<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2_scope父子级作用域</title>
    <script src="../lib/angularjs.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
    <h1>$scope的单向绑定</h1>
    <div>
        <h2>情景1：子级$scope读取父级$scope的属性并且受控制</h2>
        <label for="case1">
            控制父级的$scope.case1：
            <input type="text" id="case1" ng-model="case1">
        </label>
        <div>这里是父级的值：{{case1}}</div>
        <div ng-controller="ctrl1">这里是子级的值：{{case1}}</div>
    </div>
    <div>
        <h2>情景2：子级$scope读取父级$scope的属性后，自己控制</h2>
        <label for="case2_1">
            控制父级的$scope.case2：
            <input type="text" id="case2_1" ng-model="case2">
        </label>
        <div>这里是父级的值：{{case2}}</div>
        <div ng-controller="ctrl1">
            这里是子级的值：{{case2}}
            <label for="case2_2">
                控制子级的$scope.case2：
                <input type="text" id="case2_2" ng-model="case2">
            </label>
        </div>
    </div>
    <h1>$scope的双向绑定</h1>
    <div>
        <h2>情景2：子级$scope读取和控制父级$scope的属性，并同步给父级$scope</h2>
        <label for="case3_1">
            控制父级的$scope.case2：
            <input type="text" id="case3_1" ng-model="obj.title">
        </label>
        <div>这里是父级的值：{{obj.title}}</div>
        <div ng-controller="ctrl2">
            这里是子级的值：{{obj.title}}
            <label for="case3_2">
                控制子级的$scope.case2：
                <input type="text" id="case3_2" ng-model="obj.title">
            </label>
        </div>
    </div>
</body>
<script>
    const myApp = angular.module("myApp", [])
    myApp.controller("myCtrl", ["$scope", function ($scope) {
        $scope.case1 = "case1"
        $scope.case2 = "case2"
        $scope.obj = { title: "大海贼时代来临！" }
    }])
    myApp.controller("ctrl1", ["$scope", function ($scope) { }])
    myApp.controller("ctrl2", ["$scope", function ($scope) { }])
</script>

</html>